<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <link href="../public/css/animate.css" rel="stylesheet">
    <link href="../public/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--dom结构部分-->
<div style="width: 100%;text-align: center">
    <!--用来存放item-->
    <h1>JS实现聊天接收到消息语言自动提醒</h1>
    <h3>(您有新的消息请注意查收)</h3>
    <div id="audio_click">
        <a id="btn_audio" href="#" rel="external nofollow" >播放语音</a>
    </div>
    <div id="audio_play"></div>
</div>
<input type="hidden" id="userId" value="1">
<form onSubmit="return false;">
    <input type = "text" name="message" value="hello" onblur="WS.send()"/>
    <br/><br/>

    <textarea id="responseText" style="width: 800px;height: 300px;"></textarea>
</form>
<style>
    #audio_click {
        margin-top: 32px;
        height: 40px;
    }
    #audio_click a {
        text-decoration: none;
        background: #2f435e;
        color: #f2f2f2;
        padding: 10px 30px 10px 30px;
        font-size: 16px;
        font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
        font-weight: bold;
        border-radius: 3px;
        -webkit-transition: all linear 0.30s;
        -moz-transition: all linear 0.30s;
        transition: all linear 0.30s;
    }
    #audio_click a:hover {
        background: #385f9e;
    }
    .alert-minimalist {
        background-color: rgb(241, 242, 240);
        border-color: rgba(149, 149, 149, 0.3);
        border-radius: 3px;
        color: rgb(149, 149, 149);
        padding: 10px;
        width: 15%;
    }
    .alert-minimalist > [data-notify="icon"] {
        height: 50px;
        margin-right: 12px;
    }
    .alert-minimalist > [data-notify="title"] {
        color: rgb(51, 51, 51);
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .alert-minimalist > [data-notify="message"] {
        font-size: 80%;
    }
</style>
<script type="text/javascript" src="../public/js/message/reconnecting-websocket.js"></script>
<script type="text/javascript" src="../public/js/message/NoticeLinkType.js"></script>
<script type="text/javascript" src="../public/js/message/WebsocketUtil.js"></script>
<script type="text/javascript" src="../public/js/notify/notify.js" charset="UTF-8"></script>
<script type="text/javascript" src="../public/js/bootstrap-notify/bootstrap-notify.js" charset="UTF-8"></script>
<script type="text/javascript" src="../public/js/bootstrap-notify/NotifyUtil.js" charset="UTF-8"></script>
<script type="text/javascript">
    var WS;
    $(function () {
        WS = new WBT();

        /**
         * 监听回调方法
         */
        watchMessage([
            NoticeLinkType.sys,
            NoticeLinkType.serverError,
            NoticeLinkType.noticeCount,
            NoticeLinkType.serverSuccess,
            NoticeLinkType.kickOutSession,
        ], function (notice, linkType) {
            //底部滚动显示。
            console.log(notice)
            if (notice.playAudio){
                $('#audioPlay')[0].play();
            }
            notifyUtil.notifyNotice({
                icon: notice.icon,
                title: notice.title,
                message: notice.content,
                url: 'http://www.baidu.com',
                target: '_blank'
            });
        });

        watchMessage([
            NoticeLinkType.businessException,
        ], function (notice, linkType) {
            // Dialog.danger(notice.content || '业务错误')
        })

    })
</script>
<script type="text/javascript">
    $(function () {
        var html = '';
        html += '<audio id="audioPlay">';
        //格式ogg音频地址
        html += '<source src="/public/js/notify/reminder-vocie.ogg" type="audio/ogg">';
        //格式mp3音频地址
        html += '<source src="/public/js/notify/reminder-vocie.mp3" type="audio/mpeg">';
        //格式wav音频地址
        html += '<source src="/public/js/notify/reminder-vocie.wav" type="audio/wav">';
        html += '</audio>';
        //将代码写入到页面中
        $(html).appendTo("#audio_play");
        //轮询ajax检测未读消息，每五分钟
        var setTime = setInterval(function () {
            $.ajax({
                type: "post",
                url: "{:url('index/getNoReadMsg')}", //查询客服是否有未读消息
                dataType: "json",
                success: function (ret) {
                    if (ret.code == 1) {
                        //有则进行播放语音提醒
                        $('#audioPlay')[0].play();
                    }
                }
            });
        }, 300000);
    });
    $("#btn_audio").click(function () {
        //这就代码就是播放语音的关键代码
        $('#audioPlay')[0].play();
    });
</script>
</body>
</html>